<template>
    <el-scrollbar class="my-scroll">
        <el-menu class="my-aside-menu" :collapse="props.collapse" active-text-color="#ffd04b" background-color="#545c64"
            router text-color="#fff" :default-active="$route.path">
            <AsideMenu :menus="menuList" />
        </el-menu>
    </el-scrollbar>
</template>

<script setup lang="ts">
import AsideMenu from '@/components/admin/asideMenu.vue'
import { reactive } from 'vue'

const props = defineProps<{
    collapse: boolean,
}>()
const emit = defineEmits<{
    (e: 'update:collapse', val: boolean): void,
}>()
const menuList = reactive<MenuList[]>([
    { id: 1, name: '控制台', icon: 'Menu', router: '/admin/index' },
    {
        id: 2, name: '导航管理', icon: 'Odometer', router: '', children: [
            { id: 3, name: '导航分类', icon: 'Switch', router: '/admin/assort' },
            { id: 4, name: '导航管理', icon: 'Memo', router: '/admin/navigation' },
        ]
    },
    { id: 5, name: '假期数据录入', icon: 'ColdDrink', router: '/admin/holidays' },
    { id: 6, name: '系统管理', icon: 'Setting', router: '/admin/setting' },
    { id: 10, name: '系统日志', icon: 'Notebook', router: '/admin/logs' },
])
</script>

<style lang="scss" scoped>
.my-scroll {
    //background: #545c64;

    .my-aside-menu {
        min-height: 100vh;
        padding-top: 10px;

        &:not(.el-menu--collapse) {
            width: 200px;
        }
    }
}
</style>